<template>
	<view class="container999">
		<zwyList ref="zwyList" :noMore="noMore" @loadMore="getList" :listLength="listLength" @refresh="getList('refresh')">
			<navTopTT :title="title"></navTopTT>
			<view class="content-list style-two">
				<view 
					class="item-box"
					:class="((index + 1) % 3) === 0 ? 'no-right' : ''"
					v-for="(item, index) in historyList" 
					@tap="toDetail(item)"
					:key="index"  
				>
					<view class="img-box">
						<image lazy-load :src="item.coverImgUrl || item.contentInfo.coverImgUrl"></image>
					</view>
					<view class="title-box">{{ item.title || item.contentInfo.title }}</view>
					<view class="text-one">更新至第{{ item.updateOfEpisodes || item.contentInfo.updateOfEpisodes }}集</view>
				</view>
			</view>
		</zwyList>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			title: '',
			listLength: 0,
			noMore: 0,
			historyList: [],
			pageNum: 1,
			pageSize: 10,
			type: ''
		};
	},
	methods: {
		toDetail(item) {
			console.log('item', item);
			this.zwyRouter(`../video/video?fakeId=${item.fakeId || (item.contentInfo|| {}).fakeId}&compilationId=${item.compilationId || (item.contentInfo|| {}).compilationId}`);
		},
		// 获取首页配置
		async getIndexConfig() {
			try {
				let res = await this.zwyRequest({
					url: '/cdp/section_group',
					method: 'GET',
					data: {
						sectionGroupTypeValue: 4
					}
				})
				this.recommendObj = (res.find(item=> item.styleType === 'STYLE_17') || {})
				this.title = this.recommendObj.name
				this.historyList = this.recommendObj.contents || []
			} catch (error) {
				console.log(error)
			}
		},
		async getList(type) {
			if(this.type !== 'moreHot') return
			if (type == 'refresh') {
				this.noMore = 2;
				this.pageNum = 1;
			} else {
				this.noMore = 2;
			}
			let api = '/cdp/user_subscribe/compilations'
			this.zwyRequest({
				url: `${api}?pageNum=${this.pageNum}`
			}).then(res => {
				console.log('getList', res);
				if (res) {
					let tempList;
					if (type == 'refresh') {
						tempList = res;
					} else {
						tempList = this.historyList.concat(res);
					}
					let tempMore = 0;
					this.pageNum++;
					if (res.length == 0) {
						tempMore = 1;
					}
					this.$refs.zwyList.endAfter();
					this.historyList = tempList;
					this.noMore = tempMore;
					this.listLength = tempList.length;
				}
			});
		}
	},
	onShareAppMessage: function () {
	    var shareJson = {
	      path: '/pages/fx_xjc/fx_xjc',
	      data: {
			page: 'hj_history',
	        sharePosition: '/pages/fx_xjc/fx_xjc',
	        'from': '/position/share/share',
	        sharePage: '/pages/fx_xjc/fx_xjc',
	      }
	    }
		// 达人分享批次
        console.log(getApp().globalData.shareBatchId)
        if(getApp().globalData.shareBatchId) {
            shareJson.channel = 'video'
            shareJson.extra = {
                hashtag_list: ['精彩短剧热播中👈']
            }
        }
	    shareJson.title = '精彩短剧热播中👈';
	    return this.formatShare(shareJson)
	},
	onLoad(options) {
		this.type = options.type || ''
		if (options.type === 'moreHot') {
			this.title = '在追热剧'
			this.getList('refresh')
		} else {
			this.title = ''
			this.getIndexConfig()
		}
	}
};
</script>

<style lang="scss">
.barMargin {
	width: 100%;
	height: 100rpx;
}
.content {
	padding: 30rpx;
	flex-direction: column;
}
.lineBox {
	flex-direction: column;
}
.noData {
	width: 100%;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
	height: 100%;
	width: 100%;
	flex-direction: column;
}

.noMore {
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
page {
	background-color: white !important;
	border-top: 1rpx solid #f6f6f6;
}


.content-list {
	display: flex;
	overflow: auto;
	padding: 0 24rpx;
	&.style-two {
		flex-wrap: wrap;
		.no-right {
			margin-right: 0;
		}
		.item-box {
			margin-bottom: 21rpx;
		}
	}
	.item-box {
		display: flex;
		flex-direction: column;
		margin-right: 14rpx;
		.img-box {
			width: 223rpx;
			height: 315rpx;
			border-radius: 13rpx;
			overflow: hidden;
			image {
				display: table-cell;
				width: 223rpx;
				height: 315rpx;
			}
		}
		.title-box {
			width: 100%;
			color: #333333;
			font-size: 30rpx;
			line-height: 42rpx;
			margin: 11rpx 0 3rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 223rpx;
		}
	}
}
</style>
